<template>
  <div>
    <label @click="openmodal = true">
      <slot></slot>
    </label>
    <Modal
      v-model="openmodal"
      @on-ok="confirmModel"
      class-name="image-panel"
      width="950px"
    >
      <FileUpload
        slot="header"
        @uploaded="uploadCallback"
        :accept="['image', 'video', 'audio']"
      >
        <Button type="primary">上传</Button>
      </FileUpload>
      <Row>
        <Col
          span="4"
          v-for="(item, index) in imgList"
          :key="index"
          class="source-item"
          accesskey="index"
        >
          <Icon
            class="delete-img"
            type="md-close"
            @click="delete_image(item.qId)"
            style="display: none"
          />
          <Button
            class="preview-btn"
            style="display: none"
            v-if="source_type(item.q_type) == 'video'"
            size="small"
            @click="previewVideo(item.url)"
            type="primary"
            >播放</Button
          >

          <div
            v-if="source_type(item.q_type) == 'image'"
            :src="item.url"
            alt
            class="source-box source-image"
            @click="checkImg(index)"
            :style="{ backgroundImage: 'url(' + item.url + ')' }"
          ></div>
          <video
            v-if="source_type(item.q_type) == 'video'"
            preload="metadata"
            :src="item.url + '#t=2'"
            alt
            class="source-box"
            @click="checkImg(index)"
          ></video>
          <div
            :class="{
              'active-check': item.check,
              fa: item.check,
              'fa-check': item.check,
            }"
          ></div>
        </Col>
      </Row>
      <Card :bordered="false" v-if="imgList.length <= 0">
        <p slot="title">提示</p>
        <p>暂无图片</p>
      </Card>
      <br />
      <Page
        :total="total"
        :page="page"
        :page-size="21"
        @on-change="getImageList"
        show-elevator
      />
    </Modal>
  </div>
</template>

<script>
import upload from "@/api/file";
import FileUpload from "@/components/FileUpload.vue";
export default {
  components: {
    FileUpload,
  },
  data() {
    return {
      imgList: [],
      openmodal: false,
      total: 0,
      page: 1,
      pageSize: 10,
      checked_imgs: [],
      deleteQiniu: {
        q_id: ""
      }
    };
  },
  model: {
    prop: "value", 
    event: "hand", 
  },
  props: {
    value: String,
    uploaded: Function,
    mode: {
      type: String,
      default: "single",
    },
  },
  watch: {
    openmodal: function (new_value) {
      if (new_value) this.getImageList();
      this.checked_imgs = [];
    },
  },
  methods: {
    getImageList(page = 1) {
      upload
        .imgList({
          page: page,
          pageSize: this.pageSize,
        })
        .then((response) => {
          if (response.data.code == 0) {
            console.log(response);
            this.imgList = response.data.data.list;
            this.total = response.data.data.total;
          }
        });
    },
    uploadCallback() {
      this.getImageList();
    },
    confirmModel() {
      this.$emit("hand", this.checked_imgs[0]);
      this.$emit("on-confirm", this.checked_imgs);
    },
    delete_image(image) {
      let _this = this;
      _this.$Modal.confirm({
        title: "提示",
        content: "确认要删除这项资源吗?",
        onOk: () => {
          _this.deleteQiniu.q_id = image
          upload
            .delete_image(_this.deleteQiniu)
            .then((response) => {
              let resdata = response.data;
              if (resdata.code == 0) {
                _this.$Message.success("删除成功");
                _this.getImageList();
              }
            });
        },
      });
    },

    // previewAudio(url) {
    //   PreviewSource.previewAudio(this, url);
    // },
    // previewVideo(url) {
    //   PreviewSource.previewVideo(this, url);
    // },
    source_type(type) {
      let source_type = (type || "").split("/")[0] || "image";
      return source_type;
    },

    checkImg(index) {
      let item = this.imgList[index];
      if (this.mode == "single") {
        for (let i = 0; i < this.imgList.length; i++) {
          this.imgList[i].check = false;
        }
        this.imgList[index].check = true;
        this.checked_imgs = [item.url];
      } else if (this.mode == "multi") {
        let before = this.imgList[index].check;
        let checknow = typeof before == "undefined" ? true : !before;
        this.imgList[index].check = checknow;
        if (checknow) {
          this.checked_imgs.push(item.url);
        } else {
          Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
              this.splice(index, 1);
            }
          };
          this.checked_imgs.remove(item.url);
        }
      }
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-panel {
  max-height: 440px;
  height: 440px;
}

.source-item {
  display: block;
  text-align: center;
  margin: 10px;
  margin-bottom: 20px;
  width: 110px;
  max-width: 110px;
  height: 110px;
  max-height: 110px;

  .active-check {
    width: 20px;
    height: 20px;
    background-color: #2d8cf0;
    margin-top: -20px;
    margin-right: -9px;
    z-index: 50;
    position: relative;
    font-size: 10px;
    line-height: 20px;
    color: white;
    border-radius: 4px;
    float: right;
  }

  &:hover .delete-img {
    display: block !important;
    width: 20px;
    height: 20px;
    color: #ff0f0f;
    background-color: #fff;
    border: #ff0f0f 1px solid;
    text-align: center;
    line-height: 20px;
    border-radius: 4px;
    margin-bottom: -50px;
    margin-right: -9px;
    z-index: 50;
    position: relative;
    float: right;
  }

  &:hover .preview-btn {
    display: block !important;
    margin-bottom: -50px;
    z-index: 999999;
    position: relative;
    float: left;
  }

  .source-box {
    width: 120px;
    max-width: 120px;
    height: 120px;
    border-radius: 4px;
    box-shadow: 1px 3px 12px rgba(179, 177, 177, 0.616);
    border: #2d8cf0 1px solid;
  }
}

.source-image {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.source-video {
  display: block;
}

.source-audio {
  background-image: url(../assets/image/audio.svg);
  background-repeat: no-repeat;
  background-size: center;
  background-position: center;
  padding-top: 90px;
}
</style>